<!DOCTYPE html>
<html>

<body>
    <div style="display: none;">
        <button onclick="sendMessage()" type="button">23</button>
    </div>

    <div class="ccomform"
        style="inset: 0px;background-color: rgba(0,0,0,0.65);position: fixed;z-index: 12;display: none;"></div>
    <div class="ccomform" style="position: fixed;inset: 0px;z-index: 13;display: none;">
        <div
            style="  border-radius: 5px; border: 1px solid #ccc;  padding: 20px;  margin: 0px auto;margin-top: 20vh;height: 130px;background-color: #f5f5f5;width: 200px;display: flex;justify-content: space-around;align-items: center;flex-direction: column;">
            <div id="messageInfo" style="padding: 12px;color: black;font-weight: 600;">确认删除？</div>
            <div class="f">
                <div class="f">
                    <button class="button" style="margin-right: 20px;" onclick="queren(true)">确认</button>
                    <button class="button3" onclick="queren(false)">取消</button>
                </div>
            </div>
        </div>
    </div>
    <div style="width:100%;height:100vh;">
        <div style="padding:24px;width:calc(100% - 48px);height: calc(100vh - 85px);">
            <div class="f" style="align-items: left;">
                <select name="method" id="method-select" onchange="setApiInfoTmp('method',this)">
                    <option class="method_option">GET</option>
                    <option class="method_option">POST</option>
                </select>
                <input type="text" placeholder="接口路径，/开头或者 http 开头" id="path" onchange="setApiInfoTmp('path',this)"
                    style="margin-left: 4px;padding-left: 8px;width: calc(100% - 178px);">
                <button class="button" style="margin-left: 8px;" onclick="sendLocal()" id="sendButton">发送</button>
                <button class="button_t" style="margin-left: 8px;" onclick="saveApi('method_path')">保存</button>
            </div>
            <div class="f" style="align-items: left;">
                <div class="f"
                    style="flex-direction: column;align-items: start;height: calc(100vh - 120px);width: 20px;justify-content: start;">
                    <div style="width: 20px;padding: 8px 1px;cursor: pointer;text-align: center;" class="chooseF"
                        id="menu_request" onclick="changeF('menu_request',this)">请求
                    </div>
                    <div style="width: 20px;padding: 8px 1px;cursor: pointer;text-align: center;" id="menu_response"
                        onclick="changeF('menu_response',this)">响应</div>
                    <div style="width: 20px;padding: 8px 1px;cursor: pointer;text-align: center;" id="menu_info"
                        onclick="changeF('menu_info',this)">信息</div>
                    <div style="width: 20px;padding: 8px 1px;cursor: pointer;text-align: center;" id="menu_history"
                        onclick="changeF('menu_history',this)">历史</div>
                </div>
                <div style="border: 0.5px solid var(--vscode-editor-foreground);margin: 12px 4px;height: calc(100vh - 120px);width: calc(100% - 30px);border-radius: 2px;align-items: baseline;flex-direction: column;"
                    class="f">
                    <div style="height: 100%;align-items: baseline;flex-direction: column;width: 100%;"
                        id="menu_request_data" class="f">
                        <div class="f tabs " id="tabs_req" style="justify-content: left;width: 100%;">
                            <div style="width: 4px;"></div>
                            <div class="tab" onclick="changetab('tabs_req',0)">params</div>
                            <div style="border-left: 1px solid var(--vscode-editor-foreground);height: 12px;"></div>
                            <div class="tab" onclick="changetab('tabs_req',1)">headers</div>
                            <div style="border-left: 1px solid var(--vscode-editor-foreground);height: 12px;"></div>
                            <div class="tab" onclick="changetab('tabs_req',2)">body</div>
                            <div style="border-left: 1px solid var(--vscode-editor-foreground);height: 12px;"></div>
                            <div class="tab" onclick="changetab('tabs_req',3)">前置操作</div>
                            <div style="border-left: 1px solid var(--vscode-editor-foreground);height: 12px;"></div>
                            <div class="tab" onclick="changetab('tabs_req',4)">后置操作</div>
                            <div style="border-left: 1px solid var(--vscode-editor-foreground);height: 12px;"></div>
                            <div class="tab" onclick="changetab('tabs_req',5)">其他配置</div>
                        </div>
                        <div style="height: calc(100% - 30px);align-items: baseline;width: 100%;overflow-y: auto;overflow-x: hidden;"
                            class="f">
                            <table id="params_table" style="display: none;">
                            </table>
                            <table id="headers_table" style="display: none;">
                            </table>
                            <div id="body_div" style="display: none;width: 98%;height: 100%;">
                                <div class="f tabs " id="tabs_body"
                                    style="justify-content: left;height: 16px;background-color: grey;color: var(--vscode-editor-foreground);border-radius: 3px;width: 100%;">
                                    <div style="width: 20px;"></div>
                                    <div class="tab tab_small " onclick="changetab('tabs_body',0)" id="none">none</div>
                                    <div class="tab tab_small " onclick="changetab('tabs_body',1)" id="json">json</div>
                                    <div class="tab tab_small " onclick="changetab('tabs_body',2)"
                                        id="x-www-form-urlencoded">x-www-form-urlencoded
                                    </div>
                                    <div class="tab tab_small " onclick="changetab('tabs_body',3)" id="form-data">
                                        form-data
                                    </div>
                                    <div class="tab tab_small " onclick="changetab('tabs_body',4)" id="raw">raw</div>
                                </div>
                                <div style="width: 100%;height: calc(100% - 22px);">
                                    <div style="width: 100%;display: none;height: 20vh;margin: auto;text-align: center;padding-top: 15vh;"
                                        id="body_none" name="none">
                                        请求没有 body 体
                                    </div>
                                    <div style="width: 100%;display: none;height: 100%" id="body_json" name="json">
                                        <div style="height: 16px;justify-content: left;margin-top: 2px;margin-bottom: 2px;"
                                            class="f">
                                            <a style="user-select: none;margin: 0px 8px;font-size: 12px;"
                                                onclick="toJSON('body_json_text',4)">格式化</a>
                                            <a style="user-select: none;margin: 0px 8px;font-size: 12px;"
                                                onclick="toJSON('body_json_text',0)">压缩</a>
                                            <a style="user-select: none;margin: 0px 8px;font-size: 12px;"
                                                onclick="saveApi('body_json','body_json_text')">保存</a>
                                        </div>
                                        <textarea placeholder="请输入 json 文本" id="body_json_text"
                                            style="padding: 4px; width: calc(100% - 8px);resize:none;height: calc(100% - 30px);border-radius: 2px;background-color: transparent;color: var(--vscode-editor-foreground);"></textarea>
                                    </div>
                                    <div style="width: 100%;display: none;" id="body_kv" name="x-www-form-urlencoded">
                                        <table id="body_table" style="width: 100%;">
                                        </table>
                                    </div>
                                    <div style="width: 100%;display: none;height: 20vh;margin: auto;text-align: center;padding-top: 15vh;"
                                        id="body_form" name="form-data">
                                        开发中，敬请期待～
                                    </div>
                                    <div style="width: 100%;display: none;height: 100%" id="body_raw" name="raw">
                                        <div style="height: 16px;justify-content: left;margin-top: 2px;margin-bottom: 2px;"
                                            class="f">
                                            <a style="user-select: none;margin: 0px 8px;font-size: 12px;"
                                                onclick="saveApi('body_raw','body_raw_text')">保存</a>
                                        </div>
                                        <textarea placeholder="请输入 任意文本 信息" id="body_raw_text"
                                            style="padding: 4px; width: calc(100% - 8px);resize:none;height: calc(100% - 30px);border-radius: 2px;background-color: transparent;color: var(--vscode-editor-foreground);"></textarea>
                                    </div>

                                </div>
                            </div>
                            <div id="before_div" style="display: none;width: 98%;height: 100%;">
                                <div style="width: 100%;display: flex;height: 100%;flex-direction: row;">
                                    <div style="border-right: #717171 3px solid;height: 100%;width:320px;flex-direction: column;justify-content: start;"
                                        class="f before" id="bslide">

                                    </div>
                                    <div class="f"
                                        style="width: calc(100% - 24px);padding: 12px;justify-content: start;align-items: baseline;height: calc(100% - 24px);overflow-y: auto;overflow-x: hidden;white-space: pre-wrap;"
                                        id="bcontent">
                                        点击查看数据
                                    </div>
                                </div>
                            </div>
                            <div id="after_div" style="display: none;width: 98%;height: 100%;">
                                <div style="width: 100%;display: flex;height: 100%;flex-direction: row;">
                                    <div style="border-right: #717171 3px solid;height: 100%;width: 320px;flex-direction: column;justify-content: start;"
                                        class="f after" id="aslide">
                                    </div>
                                    <div class="f"
                                        style="width: calc(100% - 24px);padding: 12px;justify-content: start;align-items: baseline;height: calc(100% - 24px);overflow-y: auto;overflow-x: hidden;white-space: pre-wrap;"
                                        id="acontent">
                                        点击查看数据
                                    </div>
                                </div>
                            </div>
                            <div id="other_div" style="display: none;width: 98%;height: 100%;">
                                <div class="f" style="flex-direction: row;">
                                    <label>超时时间（毫秒）</label>
                                    <input type="text" id="timeout_input" style="margin: 0px 4px;line-height: 16px;">
                                    <button class="button_ts" onclick="saveApi('timeout','timeout_input')">保存</button>
                                </div>
                                <!-- 超时 -->
                            </div>
                        </div>
                    </div>
                    <div style="height: 100%;display:none;width: 100%;" id="menu_response_data">
                        <div class="f tabs " id="tabs_response" style="justify-content: left;width: 100%;">
                            <div style="width: 4px;"></div>
                            <div class="tab" onclick="changetab('tabs_response',0)">响应结果</div>
                            <div style="border-left: 1px solid var(--vscode-editor-foreground);height: 12px;"></div>
                            <div class="tab" onclick="changetab('tabs_response',1)">响应头</div>
                            <div style="border-left: 1px solid var(--vscode-editor-foreground);height: 12px;"></div>
                            <div class="tab" onclick="changetab('tabs_response',2)">请求信息</div>
                            <div style="border-left: 1px solid var(--vscode-editor-foreground);height: 12px;"></div>
                            <div class="tab" onclick="changetab('tabs_response',3)">错误信息</div>
                            <div style="border-left: 1px solid var(--vscode-editor-foreground);height: 12px;"></div>
                            <div class="tab" onclick="changetab('tabs_response',4)">打印信息<span style="margin-left: 4px;color: #aaaaaa;" id="logNum">0</span></div>
                            <div style="border-left: 1px solid var(--vscode-editor-foreground);height: 12px;"></div>
                            <div style="flex-direction: row;" class="f"><span style="margin: 0px 8px;"
                                    id="res_code"></span> <span id="res_msg" style="margin: 0px 4px;"></span><span
                                    id="res_cost" style="margin: 0px 8px;"></span></div>
                        </div>
                        <div style="height: calc(100% - 50px);align-items: baseline;width: 100%;overflow-y: auto;overflow-x: hidden;justify-content: flex-start;padding: 8px;"
                            class="f">
                            <div id="res_body"
                                style="display: none;width: 98%;height: 100%;white-space: pre-wrap;line-height: 24px;width: 100%;">
                            </div>
                            <div id="res_headers"
                                style="display: none;width: 98%;height: 100%;white-space: pre-wrap;line-height: 28px;width: 100%;">
                            </div>
                            <div id="res_req"
                                style="display: none;width: 98%;height: 100%;white-space: pre-wrap;line-height: 28px;width: 100%;">
                            </div>
                            <div id="res_error"
                                style="display: none;width: 98%;height: 100%;white-space: pre-wrap;line-height: 28px;width: 100%;">
                            </div>
                            <div id="res_log"
                                style="display: none;width: 98%;height: 100%;white-space: pre-wrap;line-height: 28px;width: 100%;">
                            </div>

                        </div>
                    </div>
                    <div style="height: 100%;display:none;" id="menu_info_data">
                        <form action="" method="post" onsubmit="return false">
                            <div class="form">
                                <label for="name">接口名称:</label>
                                <input type="text" id="itemName" class="inp" required>
                            </div>
                            <div class="form">
                                <label for="email">接口 ID:</label>
                                <input type="text" id="itemId" class="inp" disabled>
                            </div>
                            <div class="f">
                                <button class="button" style="margin-right: 20px;" onclick="saveItem()">保存</button>
                                <button class="button_t" style="margin-right: 20px;" onclick="exportItem()">导出</button>
                                <button class="button_t" onclick="delItem()">删除</button>
                            </div>
                        </form>
                    </div>
                    <div style="height: 100%;display:none;" id="menu_history_data">
                        暂不支持</div>
                </div>


            </div>

        </div>
        <div style="width: 100%;height: 36px;position: fixed;border-top: 1px solid var(--vscode-editor-foreground);justify-content: left;z-index: 99;"
            class="f">
            <span style="margin-left: 12px;">环境配置：</span>
            <select name="env" id="env-select" onchange="changeEnv()">
            </select>
        </div>
    </div>
</body>
<script>
    const vscode = acquireVsCodeApi()
    function sendMessage() {
        const message = {
            command: 'showMessage',
            text: 'Hello from HTML!'
        };
        vscode.postMessage(message);
    }
    var itemInfo = {}
    window.addEventListener('message', event => {
        const message = event.data;
        console.log('mmm', message)
        // 处理来自插件的消息
        if (message.command == 'itemInfo') {
            loadItemInfo(message.da)
        } else if (message.command == 'apiInfo') {
            loadApiInfo(message.da)
        } else if (message.command == 'sendresult') {
            sendresult(message.da)
        } else if ('runScriptResult' === message.command) {
            runScriptResult(message.da)
        }
    });

    // 在 HTML 加载完成后通知插件进行初始化
    window.addEventListener('DOMContentLoaded', () => {
        // vscode.postMessage({ command: 'globalStateInit' });
        vscode.postMessage({ command: 'itemInit' });
        vscode.postMessage({ command: 'apiInit' });

    });
    var ccomform_callback = null
    function ccomform(callback, content) {
        let dd = 'block';

        if (!callback) {
            dd = 'none';
        }
        if (content) {
            document.getElementById('messageInfo').innerText = content
        } else {
            document.getElementById('messageInfo').innerText = '确认删除？'
        }
        let cc = document.getElementsByClassName('ccomform');
        cc[0].style.display = dd;
        cc[1].style.display = dd;
        ccomform_callback = callback
    }
    function queren(st) {
        if (st && ccomform_callback) {
            try {
                ccomform_callback()
            } catch (err) {
                console.log(err)
            }
        }
        ccomform()
    }

    // 一下是页面逻辑
    var itemInfo = {}
    var params = {}
    var gReq = {}
    var envInfo = {}
    var itemLoad=false;
    var apiLoad=false;
    function loadItemInfo(da) {
        itemInfo = da
        console.log('ddd', da)
        params = { ...da.global.params }
        gReq = { ...da.global.req }
        showEnv(da.env)
        itemLoad=true
    }
    var apiInfo = {}
    var apiInfoBase = {}
    var tmpApiInfo = {}

    function loadApiInfo(da) {
        apiInfo = da.apiInfo;
        apiInfoBase = da
        var t=100
        if(itemLoad){
            t=1
        }
        setTimeout(() => {
            if (!apiInfo.syncGloabl) {
            apiInfo.params = { ...gReq.params, ...apiInfo.params }
            apiInfo.headers = { ...gReq.headers, ...apiInfo.headers }
            apiInfo.body = { ...gReq.body, ...apiInfo.body }
            apiInfo.timeout = gReq.timeout
            apiInfo.syncGloabl = true
            vscode.postMessage({ command: 'setApiInfo', da: apiInfo, aid: apiInfoBase.id })
        }
        tmpApiInfo = { ...apiInfo }
        tmpApiInfo.params = { ...apiInfo.params }
        tmpApiInfo.headers = { ...apiInfo.headers }
        tmpApiInfo.body = { ...apiInfo.body }
        document.getElementById('itemName').value = da.name
        document.getElementById('itemId').value = da.id
        // console.log('aaa', apiInfo)
        setMethod_path()
        setParamsTable()
        setHeadersTable()
        showBeforeAfter()
        initBody()
        if (apiInfo.method == "POST") {
            changetab('tabs_req', 2)
        } else {
            changetab('tabs_req', 0)
        }
        setResAll()
        changetab('tabs_response', 0)
        apiLoad=true
        }, t);
    }

    function initBody() {
        if (apiInfo.method !== "POST") {
            apiInfo.contentType = 'none'
        }
        // if(apiInfo.method=="POST"){
        document.getElementById(apiInfo.contentType).click()
        // }
        document.getElementById('timeout_input').value = apiInfo.timeout
    }
    function setMethod_path() {

        if (apiInfo.method == 'GET') {
            document.getElementById('method-select').selectedIndex = 0
        } else {
            document.getElementById('method-select').selectedIndex = 1
        }
        document.getElementById('path').value = apiInfo.path

    }
    function toJSON(id, wei) {
        const v = document.getElementById(id).value
        if (!v) {
            vscode.postMessage({ command: 'message', content: '空内容，无法转格式' })
            return
        }
        let o = {}
        try {
            o = JSON.parse(v)
        } catch (e) {
            vscode.postMessage({ command: 'message', content: 'json格式正确，无法转格式，' + e.message })
            return
        }
        if (wei && wei > 0) {
            document.getElementById(id).value = JSON.stringify(o, null, wei)
        } else {
            document.getElementById(id).value = JSON.stringify(o)
        }
    }
    var sendLoading = false
    var tmpresult = { print: [], error: "", request: {}, response: {}, hasData: false }

    function setSendLoading(st) {
        const e = document.getElementById('sendButton')
        sendLoading = st
        if (st) {
            e.disabled = true
            e.innerText = '稍等'
        } else {
            e.disabled = false
            e.innerText = '发送'
        }
    }
    function sendLocal() {
        if (sendLoading) {
            return
        }
        setSendLoading(true)
        const baseData = { 'url': envInfo.url, method: apiInfo.method, params: {}, timeout: apiInfo.timeout, headers: {}, body: {}, tid: itemInfo.id, aid: apiInfoBase.id }
        if (apiInfo.path.toUpperCase().startsWith('HTTP://') || apiInfo.path.toUpperCase().startsWith('HTTPS://')) {
            baseData.url = apiInfo.path
        } else {
            baseData.url += apiInfo.path
        }
        Object.keys(apiInfo.params).forEach(key => {
            const da = apiInfo.params[key]
            if (da.status) {
                baseData.params[da.key] = da.value
            }
        })
        Object.keys(apiInfo.headers).forEach(key => {
            const da = apiInfo.headers[key]
            baseData.headers[da.key] = da.value
        })
        if (baseData.method == 'POST' && apiInfo.contentType != 'none') {
            if (apiInfo.contentType == 'json') {
                baseData.headers['content-type'] = 'application/json'
                baseData.body = JSON.parse(apiInfo.body['daodan.json'])
            }
            else if (apiInfo.contentType == 'x-www-form-urlencoded') {
                baseData.headers['content-type'] = 'application/x-www-form-urlencoded'
                Object.keys(apiInfo.body).forEach(key => {
                    if (key.startsWith('daodan.')) {
                        return
                    }

                    const da = apiInfo.body[key]
                    if (da.status) {
                        baseData.body[da.key] = da.value
                    }
                })
            }
            else if (apiInfo.contentType == 'raw') {
                if (!baseData.headers['content-type']) {
                    vscode.postMessage({ command: 'message', content: 'post请求需要配置 content-type' })
                    setSendLoading(false)
                    return
                }
                baseData.body = apiInfo.body['daodan.raw']
            }
        }
        // 以上是组成基本请求数据
        // 以下准备参数的值
        params = { ...itemInfo.global.params, ...envInfo.params }
        params_base = {}
        Object.keys(params).forEach(key => {
            const da = params[key]
            params_base[da.key] = da.value

        })
        console.log('params_base', params_base)
        // 以下准备处理前置脚本
        let before = ''
        for (var i = 0; i < apiInfo.before.length; i++) {
            const da = apiInfo.before[i]
            if (da.status && da.id != 'before_inner') {
                before += da.content + '\n'
            }
        }
        //参数替换
        let src = JSON.stringify(baseData)
        Object.keys(params_base).forEach(key => {
            src = src.replace(new RegExp('\\$\\{' + key + '\\}', 'g'), params_base[key])
        })
        try {
            trans_base = JSON.parse(src)
        } catch (error) {
            vscode.postMessage({ command: 'message', content: '参数填写错误，无法获取正确的参数值：' + error.message })
            setSendLoading(false)
            return
        }

        // 执行前置脚本
        console.log('ready', { params: params_base, req: trans_base, code: before, res: {} })
        clearResData()
        vscode.postMessage({ command: 'runScript', da: { params: params_base, req: trans_base, code: before, res: {} } })
        setResCode(' ', 'loading', ' ')
        setResAll()
    }
    function runScriptResult(da) {

        if (da.error) {
            setSendLoading(false)
            // vscode.postMessage({ command: 'message', content: '脚本执行失败：' + da.error })
            setResCode(' ', '脚本执行失败', ' ')
        }
        tmpresult.request = da.request
        tmpresult.print = da.printInfo
        tmpresult.error = da.error
        tmpresult.hasData = true
        // console.log('runScriptResult', tmpresult)
        setResAll()
        if (da.error) {
            changetab('tabs_response', 3)
            changeF('menu_response', document.getElementById('menu_response'))
        }
    }
    function setApiInfoTmp(position, v, key) {
        if (position == 'method') {
            tmpApiInfo[position] = v.options[v.selectedIndex].value;
        } else if (position == 'path') {
            tmpApiInfo[position] = v.value;
        } else if (position == 'params_key') {
            if (!tmpApiInfo['params'][key]) {
                tmpApiInfo['params'][key] = { key: '', value: '', remark: '', status: true }
            }
            tmpApiInfo['params'][key]['key'] = v.value
        } else if (position == 'params_val') {
            if (!tmpApiInfo['params'][key]) {
                tmpApiInfo['params'][key] = { key: '', value: '', remark: '', status: true }
            }
            tmpApiInfo['params'][key]['value'] = v.value
        } else if (position == 'params_remark') {
            if (!tmpApiInfo['params'][key]) {
                tmpApiInfo['params'][key] = { key: '', value: '', remark: '', status: true }
            }
            tmpApiInfo['params'][key]['remark'] = v.value
        } else if (position == 'headers_key') {
            if (!tmpApiInfo['headers'][key]) {
                tmpApiInfo['headers'][key] = { key: '', value: '' }
            }
            tmpApiInfo['headers'][key]['key'] = v.value
        } else if (position == 'headers_value') {
            if (!tmpApiInfo['headers'][key]) {
                tmpApiInfo['headers'][key] = { key: '', value: '' }
            }
            tmpApiInfo['headers'][key]['value'] = v.value
        } else if (position == 'body_key') {
            if (!tmpApiInfo['body'][key]) {
                tmpApiInfo['body'][key] = { key: '', value: '', remark: '', status: true }
            }
            tmpApiInfo['body'][key]['key'] = v.value
        } else if (position == 'body_val') {
            if (!tmpApiInfo['body'][key]) {
                tmpApiInfo['body'][key] = { key: '', value: '', remark: '', status: true }
            }
            tmpApiInfo['body'][key]['value'] = v.value
        } else if (position == 'body_remark') {
            if (!tmpApiInfo['body'][key]) {
                tmpApiInfo['body'][key] = { key: '', value: '', remark: '', status: true }
            }
            tmpApiInfo['body'][key]['remark'] = v.value
        }
    }
    function saveApi(position, key, index) {
        if (fangdou) {
            vscode.postMessage({ command: 'message', content: '操作过于频繁，请稍后再试' })
            return
        }
        // console.log('saveApi',position,key,index)
        fangdou = true
        if (position == 'method_path') {
            let path = tmpApiInfo['path'].trim()
            // if (path == '') {
            //     vscode.postMessage({ command: 'message', content: '保存失败：路径为空' })
            //     fangdou = false
            //     return
            // }
            if (path !== '' && !path.startsWith('/') && !(path.startsWith('http://') || path.startsWith('https://') || path.startsWith('HTTP://') || path.startsWith('HTTPS://'))) {
                vscode.postMessage({ command: 'message', content: '保存失败：路径非 / 或者 http 开头' })
                fangdou = false
                return
            }
            apiInfo['method'] = tmpApiInfo['method']
            if (tmpApiInfo['path'].indexOf('?') > -1) {
                let t = tmpApiInfo['path'].split('?')
                if (t.length > 2) {
                    vscode.postMessage({ command: 'message', content: '保存失败：路径参数错误有多个？' })
                    fangdou = false
                    return
                }

                let params = t[1].split('&')
                let t2 = {}
                for (let i = 0; i < params.length; i++) {
                    let p = params[i].split('=')
                    if (p.length == 2) {
                        if (p[0] == '') {
                            vscode.postMessage({ command: 'message', content: '保存失败：参数名为空' })
                            fangdou = false
                            return
                        }
                        t2[p[0]] = { key: p[0], value: p[1], remark: '', status: true }
                    }
                }
                apiInfo['path'] = t[0]
                Object.keys(t2).forEach(key => {
                    apiInfo['params'][key] = t2[key]
                })
                tmpApiInfo['path'] = t[0]
                tmpApiInfo['params'] = [...t2]
                setParamsTable()
                document.getElementById('path').value = t[0]
            }
            apiInfo['path'] = tmpApiInfo['path']
        } else
            if (position == 'params') {
                let v = tmpApiInfo[position][key]
                if (!v) {
                    vscode.postMessage({ command: 'message', content: '操作失败：参数为空～' })
                    fangdou = false
                    return
                }

                // 增加逻辑
                let keyy = v.key.trim();
                let val = v.value.trim();
                if (keyy == '') {
                    vscode.postMessage({ command: 'message', content: '保存失败：参数为空!' })
                    fangdou = false
                    return
                }
                if (key == '-1') {
                    const table = document.getElementById('params_table');
                    table.deleteRow(index);
                    var newRow = table.insertRow(-1); // 在表格的最后插入新行  
                    var newCell0 = newRow.insertCell(0);
                    var newCell1 = newRow.insertCell(1);
                    var newCell2 = newRow.insertCell(2);
                    var newCell3 = newRow.insertCell(3);
                    var newCell4 = newRow.insertCell(4);
                    newCell0.innerHTML = '<input type="checkbox" name="' + keyy + '" onchange="changCheckbox(this,\'params\',' + index + ')" class="p_checkbox" checked>'
                    newCell1.innerHTML = '<input type="text" placeholder="参数名" style="width:98%" value="' + keyy.replace(/"/g, '&quot;') + '"  class="inp"  onchange="setApiInfoTmp(\'params_key\',this,\'' + keyy + '\')">';
                    newCell1.style.width = '200px';
                    newCell2.innerHTML = '<input type="text" placeholder="空值" style="width:98%" value="' + val.replace(/"/g, '&quot;') + '"   class="inp"  onchange="setApiInfoTmp(\'params_val\',this,\'' + keyy + '\')" >';
                    newCell3.innerHTML = '<input type="text" placeholder="说明" style="width:98%" value="' + v.remark.replace(/"/g, '&quot;') + '"   class="inp"  onchange="setApiInfoTmp(\'params_remark\',this,\'' + keyy + '\')">';
                    newCell4.innerHTML = "<div class='f ' style='flex-direction: row;'><button class='button_ts' onclick='saveApi(\"params\",\"" + keyy + "\"," + index + ")'>保存</button><button class='button_ts' style='margin-left:4px'  onclick='saveApi(\"params_del\",\"" + keyy + "\"," + index + ")'>删除</button></div>";
                    newCell4.style.width = '100px';
                    index += 1;
                    var newRow = table.insertRow(-1); // 在表格的最后插入新行  
                    var newCell0 = newRow.insertCell(0);
                    var newCell1 = newRow.insertCell(1);
                    var newCell2 = newRow.insertCell(2);
                    var newCell3 = newRow.insertCell(3);
                    var newCell4 = newRow.insertCell(4);
                    newCell0.innerHTML = '<input type="checkbox" disabled id="params_kong">'
                    newCell1.innerHTML = '<input type="text" placeholder="参数名" style="width:98%" class="inp" onchange="setApiInfoTmp(\'params_key\',this,\'-1\')">';
                    newCell1.style.width = '200px';
                    newCell2.innerHTML = '<input type="text" placeholder="参数值" style="width:98%"  class="inp"  onchange="setApiInfoTmp(\'params_val\',this,\'-1\')">';
                    newCell3.innerHTML = '<input type="text" placeholder="说明" style="width:98%"  class="inp"  onchange="setApiInfoTmp(\'params_remark\',this,\'-1\')">';
                    newCell4.innerHTML = "<div class='f ' style='flex-direction: row;'><button class='button_ts' onclick='saveApi(\"params\",\"-1\"," + index + ")'>保存</button><button class='button_ts' onclick='batchAdd(\"params\")' style='margin-left:4px' >批量</button></div>";
                    newCell4.style.width = '100px';
                    tmpApiInfo['params'][keyy] = { key: keyy, value: val, remark: v.remark, status: true }
                    tmpApiInfo['params']['-1'] = { key: '', value: '', remark: '' }
                    apiInfo['params'][keyy] = { key: keyy, value: val, remark: v.remark, status: true }
                }
                else {
                    if (key !== keyy) {
                        delete tmpApiInfo['params'][key]
                    }
                    tmpApiInfo['params'][keyy] = { key: keyy, value: val, remark: v.remark, status: v.status }
                    apiInfo['params'][keyy] = { key: keyy, value: val, remark: v.remark, status: v.status }
                }
            } else
                if (position == 'params_del') {
                    // 删除逻辑

                    ccomform(() => {
                        delete tmpApiInfo['params'][key]
                        delete apiInfo['params'][key]
                        const table = document.getElementById('params_table');
                        table.deleteRow(index);

                        vscode.postMessage({ command: 'setApiInfo', da: apiInfo, aid: apiInfoBase.id })
                        fangdou = false
                        return
                    })
                    fangdou = false
                    return
                } else
                    if (position == 'headers') {
                        let v = tmpApiInfo[position][key]
                        if (!v) {
                            vscode.postMessage({ command: 'message', content: '操作失败：参数为空～~' })
                            fangdou = false
                            return
                        }

                        // 增加逻辑
                        let keyy = v.key.trim();
                        let val = v.value.trim();
                        if (keyy == '') {
                            vscode.postMessage({ command: 'message', content: '保存失败：参数为空!' })
                            fangdou = false
                            return
                        }
                        if (key == '-1') {
                            const table = document.getElementById('headers_table');
                            table.deleteRow(index);
                            var newRow = table.insertRow(-1); // 在表格的最后插入新行  
                            // var newCell0 = newRow.insertCell(0);
                            var newCell1 = newRow.insertCell(0);
                            var newCell2 = newRow.insertCell(1);
                            var newCell3 = newRow.insertCell(2);
                            // var newCell4 = newRow.insertCell(3);
                            // newCell0.innerHTML = '<input type="checkbox">'
                            newCell1.innerHTML = '<input type="text" placeholder="请求头" style="width:98%" value="' + keyy.replace(/"/g, '&quot;') + '"  class="inp" onchange="setApiInfoTmp(\'headers_key\',this,\'' + keyy + '\')" >';
                            newCell1.style.width = '200px';
                            newCell2.innerHTML = '<input type="text" placeholder="值" style="width:98%" value="' + val.replace(/"/g, '&quot;') + '"   class="inp"  onchange="setApiInfoTmp(\'headers_value\',this,\'' + keyy + '\')">';
                            // const remark = apiInfo.params[key].remark
                            // newCell3.innerHTML = '<input type="text" placeholder="说明" style="width:98%" value="' + remark + '"   class="inp" >';
                            newCell3.innerHTML = "<div class='f ' style='flex-direction: row;'><button class='button_ts' onclick='saveApi(\"headers\",\"" + keyy + "\"," + index + ")'>保存</button><button class='button_ts' style='margin-left:4px' onclick='saveApi(\"headers_del\",\"" + keyy + "\"," + index + ")'>删除</button></div>";
                            newCell3.style.width = '100px';
                            index += 1


                            var newRow = table.insertRow(-1); // 在表格的最后插入新行  
                            // var newCell0 = newRow.insertCell(0);
                            var newCell1 = newRow.insertCell(0);
                            var newCell2 = newRow.insertCell(1);
                            var newCell3 = newRow.insertCell(2);
                            // var newCell4 = newRow.insertCell(4);
                            // newCell0.innerHTML = '<input type="checkbox">'
                            newCell1.innerHTML = '<input type="text" placeholder="请求头" style="width:98%" class="inp"  onchange="setApiInfoTmp(\'headers_key\',this,\'-1\')" >';
                            newCell1.style.width = '200px';
                            newCell2.innerHTML = '<input type="text" placeholder="值" style="width:98%"  class="inp"  onchange="setApiInfoTmp(\'headers_value\',this,\'-1\')">';
                            // newCell3.innerHTML = '<input type="text" placeholder="说明" style="width:98%"  class="inp" >';
                            newCell3.innerHTML = "<div class='f ' style='flex-direction: row;'><button class='button_ts' onclick='saveApi(\"headers\",\"-1\"," + index + ")'>保存</button><button class='button_ts' onclick='batchAdd(\"headers\")' style='margin-left:4px' >批量</button></div>";
                            newCell3.style.width = '100px';
                            tmpApiInfo['headers'][keyy] = { key: keyy, value: val }
                            tmpApiInfo['headers']['-1'] = { key: '', value: '' }
                            apiInfo['headers'][keyy] = { key: keyy, value: val }
                        }
                        else {
                            if (key !== keyy) {
                                delete tmpApiInfo['headers'][key]
                            }
                            tmpApiInfo['headers'][keyy] = { key: keyy, value: val }
                            apiInfo['headers'][keyy] = { key: keyy, value: val }
                        }

                    } else
                        if (position == 'headers_del') {
                            // 删除逻辑

                            ccomform(() => {
                                delete tmpApiInfo['headers'][key]
                                delete apiInfo['headers'][key]
                                const table = document.getElementById('headers_table');
                                table.deleteRow(index);
                                vscode.postMessage({ command: 'setApiInfo', da: apiInfo, aid: apiInfoBase.id })
                                fangdou = false
                                return
                            })
                            fangdou = false
                            return
                        } else
                            if (position == 'body') {
                                let v = tmpApiInfo[position][key]
                                if (!v) {
                                    vscode.postMessage({ command: 'message', content: '操作失败：参数为空～' })
                                    fangdou = false
                                    return
                                }

                                // 增加逻辑
                                let keyy = v.key.trim();
                                let val = v.value.trim();
                                if (keyy == '') {
                                    vscode.postMessage({ command: 'message', content: '保存失败：参数为空!' })
                                    fangdou = false
                                    return
                                }
                                if (key == '-1') {
                                    const table = document.getElementById('body_table');
                                    table.deleteRow(index);
                                    var newRow = table.insertRow(-1); // 在表格的最后插入新行  
                                    var newCell0 = newRow.insertCell(0);
                                    var newCell1 = newRow.insertCell(1);
                                    var newCell2 = newRow.insertCell(2);
                                    var newCell3 = newRow.insertCell(3);
                                    var newCell4 = newRow.insertCell(4);
                                    newCell0.innerHTML = '<input type="checkbox" name="' + keyy + '" onchange="changCheckbox(this,\'body\',' + index + ')" class="b_checkbox" checked>'
                                    newCell1.innerHTML = '<input type="text" placeholder="参数名" style="width:98%" value="' + keyy.replace(/"/g, '&quot;') + '"  class="inp"  onchange="setApiInfoTmp(\'body_key\',this,\'' + keyy + '\')">';
                                    newCell1.style.width = '200px';
                                    newCell2.innerHTML = '<input type="text" placeholder="空值" style="width:98%" value="' + val.replace(/"/g, '&quot;') + '"   class="inp"  onchange="setApiInfoTmp(\'body_val\',this,\'' + keyy + '\')" >';
                                    newCell3.innerHTML = '<input type="text" placeholder="说明" style="width:98%" value="' + v.remark.replace(/"/g, '&quot;') + '"   class="inp"  onchange="setApiInfoTmp(\'body_remark\',this,\'' + keyy + '\')">';
                                    newCell4.innerHTML = "<div class='f ' style='flex-direction: row;'><button class='button_ts' onclick='saveApi(\"body\",\"" + keyy + "\"," + index + ")'>保存</button><button class='button_ts'style='margin-left:4px'  onclick='saveApi(\"body_del\",\"" + keyy + "\"," + index + ")'>删除</button></div>";
                                    newCell4.style.width = '100px';
                                    index += 1;
                                    var newRow = table.insertRow(-1); // 在表格的最后插入新行  
                                    var newCell0 = newRow.insertCell(0);
                                    var newCell1 = newRow.insertCell(1);
                                    var newCell2 = newRow.insertCell(2);
                                    var newCell3 = newRow.insertCell(3);
                                    var newCell4 = newRow.insertCell(4);
                                    newCell0.innerHTML = '<input type="checkbox" disabled >'
                                    newCell1.innerHTML = '<input type="text" placeholder="参数名" style="width:98%" class="inp" onchange="setApiInfoTmp(\'body_key\',this,\'-1\')">';
                                    newCell1.style.width = '200px';
                                    newCell2.innerHTML = '<input type="text" placeholder="空值" style="width:98%"  class="inp"  onchange="setApiInfoTmp(\'body_val\',this,\'-1\')">';
                                    newCell3.innerHTML = '<input type="text" placeholder="说明" style="width:98%"  class="inp"  onchange="setApiInfoTmp(\'body_remark\',this,\'-1\')">';
                                    newCell4.innerHTML = "<div class='f ' style='flex-direction: row;'><button class='button_ts' onclick='saveApi(\"body\",\"-1\"," + index + ")'>保存</button><button class='button_ts' onclick='batchAdd(\"body\")' style='margin-left:4px' >批量</button></div>";
                                    newCell4.style.width = '100px';
                                    tmpApiInfo['body'][keyy] = { key: keyy, value: val, remark: v.remark, status: true }
                                    tmpApiInfo['body']['-1'] = { key: '', value: '', remark: '' }
                                    apiInfo['body'][keyy] = { key: keyy, value: val, remark: v.remark, status: true }
                                }
                                else {
                                    if (key !== keyy) {
                                        delete tmpApiInfo['body'][key]
                                    }
                                    tmpApiInfo['body'][keyy] = { key: keyy, value: val, remark: v.remark, status: v.status }
                                    apiInfo['body'][keyy] = { key: keyy, value: val, remark: v.remark, status: v.status }
                                }
                            } else
                                if (position == 'body_del') {
                                    // 删除逻辑
                                    ccomform(() => {
                                        delete tmpApiInfo['body'][key]
                                        delete apiInfo['body'][key]
                                        const table = document.getElementById('body_table');
                                        table.deleteRow(index);
                                        vscode.postMessage({ command: 'setApiInfo', da: apiInfo, aid: apiInfoBase.id })
                                        fangdou = false
                                        return
                                    })
                                    fangdou = false
                                    return
                                } else
                                    if (position == 'body_json') {
                                        const v = document.getElementById(key).value
                                        // let o = {}
                                        try {
                                            JSON.parse(v)
                                        } catch (e) {
                                            vscode.postMessage({ command: 'message', content: 'json格式不正确，无法转格式，' + e.message })
                                            fangdou = false
                                            return
                                        }
                                        apiInfo.body['daodan.json'] = v
                                    } else
                                        if (position == 'body_raw') {
                                            const v = document.getElementById(key).value

                                            apiInfo.body['daodan.raw'] = v
                                        } else
                                            if (position == 'timeout') {
                                                let v = document.getElementById(key).value
                                                // console.log('timeout', v)
                                                try {
                                                    v = parseInt(v, 10)
                                                } catch (e) {
                                                    vscode.postMessage({ command: 'message', content: '数字格式不正确，无法转格式，' + e.message })
                                                    fangdou = false
                                                    return
                                                }
                                                // console.log('timeout', v)
                                                apiInfo.timeout = v
                                            }
        fangdou = false
        vscode.postMessage({ command: 'setApiInfo', da: apiInfo, aid: apiInfoBase.id })
        if (position.indexOf('_del') == -1) {
            vscode.postMessage({ command: 'message', content: '保存成功' })
        }
    }

    function batchAdd(position) {
        if (position == 'params') {
            let con = tmpApiInfo['params']['-1']?.key
            if (!con || con == '') {
                vscode.postMessage({ command: 'message', content: '请在参数中填入批量的值,不会覆盖已有数据，使用 xx=xx&xxx=ccc的样式，有备注时，使用 xx=xxx=desx&' })
                return
            }
            let arr = con.split('&')
            for (let i = 0; i < arr.length; i++) {
                let da = arr[i].split('=')
                if (apiInfo['params'].hasOwnProperty(da[0])) {
                    continue
                }
                if (da.length == 2) {
                    tmpApiInfo['params'][da[0]] = { key: da[0], value: da[1], remark: '', status: true }
                    apiInfo['params'][da[0]] = { key: da[0], value: da[1], remark: '', status: true }
                } else if (da.length == 3) {
                    tmpApiInfo['params'][da[0]] = { key: da[0], value: da[1], remark: da[2], status: true }
                    apiInfo['params'][da[0]] = { key: da[0], value: da[1], remark: da[2], status: true }
                }
            }
            setParamsTable()

        } else if (position == 'headers') {
            let con = tmpApiInfo['headers']['-1']?.key
            if (!con || con == '') {
                vscode.postMessage({ command: 'message', content: '请在请求头中填入批量的值,不会覆盖已有数据，使用 xx: x\\nxxx: ccc的样式' })
                return
            }
            let arr = con.split('\n')
            for (let i = 0; i < arr.length; i++) {
                let da = arr[i].split(': ')
                if (apiInfo['headers'].hasOwnProperty(da[0])) {
                    continue
                }
                if (da.length == 2) {
                    tmpApiInfo['headers'][da[0]] = { key: da[0], value: da[1] }
                    apiInfo['headers'][da[0]] = { key: da[0], value: da[1] }
                }
            }
            setHeadersTable()
        } else if (position == 'body') {
            let con = tmpApiInfo['body']['-1']?.key
            if (!con || con == '') {
                vscode.postMessage({ command: 'message', content: '请在请求体中填入批量的值,不会覆盖已有数据，使用 xx=xx&xxx=ccc的样式，有备注时，使用 xx=xxx=desx&' })
                return
            }
            let arr = con.split('&')
            for (let i = 0; i < arr.length; i++) {
                let da = arr[i].split('=')
                if (apiInfo['body'].hasOwnProperty(da[0])) {
                    continue
                }
                if (da.length == 2) {
                    tmpApiInfo['body'][da[0]] = { key: da[0], value: da[1], remark: '', status: true }
                    apiInfo['body'][da[0]] = { key: da[0], value: da[1], remark: '', status: true }
                } else if (da.length == 3) {
                    tmpApiInfo['body'][da[0]] = { key: da[0], value: da[1], remark: da[2], status: true }
                    apiInfo['body'][da[0]] = { key: da[0], value: da[1], remark: da[2], status: true }
                }
            }
            setBodyKv()
        }
        vscode.postMessage({ command: 'setApiInfo', da: apiInfo, aid: apiInfoBase.id })


    }
    function showDetail(index, id, position) {
        const da = apiInfo[position][index]
        if (da.id == id) {
            if (position == 'before') {
                document.getElementById('bcontent').textContent = da.content
            } else {
                document.getElementById('acontent').textContent = da.content
            }
        } else {
            let con = '数据错误'
            for (var i = 0; i < apiInfo[position].length; i++) {
                const da2 = apiInfo[position]
                if (da2.id == id) {
                    con = da2.content;
                    break
                }
            }
            if (position == 'before') {
                document.getElementById('bcontent').textContent = con
            } else if (position == 'after') {
                document.getElementById('acontent').textContent = con
            } else {
                console.error('showDetail 数据错误')
            }
        }
        const k = document.getElementsByClassName(position)[0]?.getElementsByClassName('kuang')
        if (k) {
            for (i = 0; i < k.length; i++) {
                const kk = k[i];
                if (kk.id == id) {
                    kk.style.border = '1px solid #007BFF'
                    kk.style.color = '#006aee'
                } else {
                    kk.style.border = '1px solid var(--vscode-editor-foreground)'
                    kk.style.color = 'var(--vscode-editor-foreground)'
                }
            }
        }

    }
    function changeEnv() {
        const nowEnv = document.getElementById('env-select').value;
        if (envInfo.name) {
            vscode.postMessage({ command: 'setSelect4env', da: { tid: itemInfo.id, old: envInfo.name, now: nowEnv } })
        }
        envInfo = itemInfo.env[nowEnv]
    }
    function showEnv(envs) {
        let p = '<option value="$id" $selected >$name</option>'
        let out = ''
        if (envs['env_pro'].status) {
            let selected = ''
            if (envs['env_pro'].selected) {
                selected = 'selected';
                envInfo = envs['env_pro']
            }
            out += p.replace('$id', 'env_pro').replace('$name', '正式环境').replace('$selected', selected);

        }
        if (envs['env_pre'].status) {
            let selected = ''
            if (envs['env_pre'].selected) {
                selected = 'selected';
                envInfo = envs['env_pre']
            }
            out += p.replace('$id', 'env_pre').replace('$name', '预发环境').replace('$selected', selected);
        }
        if (envs['env_test'].status) {
            let selected = ''
            if (envs['env_test'].selected) {
                selected = 'selected';
                envInfo = envs['env_test']
            }
            out += p.replace('$id', 'env_test').replace('$name', '测试环境').replace('$selected', selected);
        }
        if (envs['env_dev'].status) {
            let selected = ''
            if (envs['env_dev'].selected) {
                selected = 'selected';
                envInfo = envs['env_dev']
            }
            out += p.replace('$id', 'env_dev').replace('$name', '开发环境').replace('$selected', selected);
        }
        if (envs['env_cus'].status) {
            let selected = ''
            if (envs['env_cus'].selected) {
                selected = 'selected';
                envInfo = envs['env_cus']
            }
            out += p.replace('$id', 'env_cus').replace('$name', '定制环境').replace('$selected', selected);
        }
        out += '<option value="xx" disabled >可在项目中配置环境数据</option>';
        document.getElementById('env-select').innerHTML = out;

    }
    function clearResData() {
        tmpresult = { request: {}, response: {}, error: '', print: [] }
    }
    function setResCode(code, msg, cost) {
        if (code) {
            document.getElementById('res_code').textContent = code
        } else {
            document.getElementById('res_code').textContent = tmpresult.response.status || ''
        }
        if(document.getElementById('res_code').innerText == '200'){
            document.getElementById('res_code').style.color = 'green'
        } else {
            document.getElementById('res_code').style.color = 'red'
        }
        if (msg) {
            document.getElementById('res_msg').textContent = msg
        } else {
            document.getElementById('res_msg').textContent = tmpresult.response.statusText || ''
        }
        if (cost) {
            document.getElementById('res_cost').textContent = cost
        } else {
            document.getElementById('res_cost').textContent = (tmpresult.response.cost || '0') + 'ms'
            if(tmpresult.response.cost&&tmpresult.response.cost>800){
                document.getElementById('res_cost').style.color = 'red'
            } else {
                document.getElementById('res_cost').style.color = 'grey'
            }
        }
       
    }
    function setResAll() {
        setResHeaders()
        setResReq()
        setResError()
        setResLog()
        setResBody()
    }
    function setResHeaders() {
        let h = tmpresult.response.headers
        let out = ''
        if (h) {
            Object.keys(h).forEach(key => {
                out += key + ': ' + h[key] + '\n'
            })
        } else {
            out = '暂无数据'
        }
        document.getElementById('res_headers').textContent = out

    }
    function setResReq() {
        let h = tmpresult.request
        let out = ''
        if(Object.keys(h).length == 0){
            out = '暂无数据'
            
        }else{
            out += h.method + ' ' + h.url + '\n'
            if (h.headers) {
                Object.keys(h.headers).forEach(key => {
                    out += key + ': ' + h.headers[key] + '\n'
                })
            }
            if (h.body) {
                out += '\n'
                if (typeof h.body == 'object') {
                    let o = JSON.stringify(h.body)
                    if (o == '{}' || o == '[]') {
                        out += ''
                    } else {
                        out += o
                    }

                } else {
                    out += h.body
                }
            }
        } 
        document.getElementById('res_req').textContent = out
    }
    function setResError() {
        let h = tmpresult.error
        let out = ''
        if (h) {
            out += h
        } else {
            out = '暂无数据'
        }
        document.getElementById('res_error').textContent = out
    }
    function setResLog() {
        let h = tmpresult.print
        let out = ''
        if (h&&h.length>0) {
            Object.keys(h).forEach(key => {
                out += h[key] + '\n'
            })
        } else {
            out = '暂无数据'
        }
        document.getElementById('logNum').textContent = h.length||0
        document.getElementById('res_log').textContent = out
    }
    function setResBody() {
        let h = tmpresult.response.data
        let out = ''
        if (h) {
            if(typeof h == 'object' && h !== null){
                out = JSON.stringify(h, null, 4)
            } else {
                out = h
            }
        } else {
            out = '暂无数据'
        }
        document.getElementById('res_body').textContent = out
    }
    var nowTableIndex = { 'tabs_req': -1, 'tabs_body': -1, 'tabs_menu': 'menu_request', 'tabs_response': -1 }
    var idMap = { 'tabs_req_0': 'params_table', 'tabs_req_1': 'headers_table', 'tabs_req_2': 'body_div', 'tabs_req_3': 'before_div', 'tabs_req_4': 'after_div', 'tabs_body_0': 'body_none', 'tabs_body_1': 'body_json', 'tabs_body_2': 'body_kv', 'tabs_body_3': 'body_form', 'tabs_body_4': 'body_raw', 'tabs_req_5': 'other_div', 'tabs_response_0': 'res_body', 'tabs_response_1': 'res_headers', 'tabs_response_2': 'res_req', 'tabs_response_3': 'res_error', 'tabs_response_4': 'res_log' }

    var fangdou = false
    function changeF(position, ele) {
        if (fangdou) {
            return
        }
        fangdou = true
        if (position == nowTableIndex['tabs_menu']) {
            fangdou = false
            return
        }

        document.getElementById(nowTableIndex['tabs_menu']).classList.remove('chooseF');
        ele.classList.add('chooseF');
        document.getElementById(nowTableIndex['tabs_menu'] + "_data").style.display = 'none'
        document.getElementById(ele.id + "_data").style.display = 'block'
        nowTableIndex['tabs_menu'] = position
        fangdou = false
    }
    function setBodyJson() {
        let ss = {}
        if (apiInfo.body['daodan.json']) {
            ss = apiInfo.body['daodan.json']
        }
        document.getElementById('body_json_text').value = JSON.stringify(ss)
    }
    function setBodyRaw() {
        let ss = ''
        if (apiInfo.body['daodan.raw']) {
            ss = apiInfo.body['daodan.raw']
        }
        document.getElementById('body_raw_text').value = ss
    }
    function handleBodyV(index) {
        const ts = document.getElementById('tabs_body').getElementsByClassName('tab');
        const id = ts[index].id

        if (id == 'x-www-form-urlencoded') {
            setBodyKv()
            apiInfo.contentType = id
            vscode.postMessage({ command: 'setApiInfo', da: apiInfo, aid: apiInfoBase.id })
        } else
            if (id == 'json') {
                setBodyJson()
            } else
                if (id == 'raw') {
                    setBodyRaw()
                } else if (id == 'form-data') {
                    return
                } else if (id == 'none') {
                    apiInfo.contentType = id
                    vscode.postMessage({ command: 'setApiInfo', da: apiInfo, aid: apiInfoBase.id })
                }

    }
    function changetab(tabs_id, index) {
        let removeIndex = nowTableIndex[tabs_id]
        if (removeIndex === index || fangdou) {
            return
        }
        if (tabs_id == 'tabs_req' && apiInfo.method != 'POST' && index == 2) {
            vscode.postMessage({ command: 'message', content: "请求是不post，无需配置 body，或者修改 post 方法后保存" })
            return
        }
        if (tabs_id == 'tabs_body' && Object.keys(apiInfo.body).length > 0 && nowTableIndex['tabs_body'] > 0) {
            ccomform(() => {
                fangdou = true
                let tab = document.getElementById(tabs_id).getElementsByClassName('tab')
                if (removeIndex !== -1) {
                    tab[removeIndex].classList.remove('active');
                    document.getElementById(idMap[tabs_id + '_' + removeIndex]).style.display = 'none'
                }
                tab[index].classList.add('active');
                nowTableIndex[tabs_id] = index
                document.getElementById(idMap[tabs_id + '_' + index]).style.display = 'contents'
                fangdou = false
                if (tabs_id == 'tabs_body') {
                    handleBodyV(index)
                }
            }, '切换类型将清空 body 数据，请确认？')
            return
        }
        fangdou = true
        let tab = document.getElementById(tabs_id).getElementsByClassName('tab')
        if (removeIndex !== -1) {
            tab[removeIndex].classList.remove('active');
            document.getElementById(idMap[tabs_id + '_' + removeIndex]).style.display = 'none'
        }
        tab[index].classList.add('active');
        nowTableIndex[tabs_id] = index
        let name = idMap[tabs_id + '_' + index]
        if (name == 'body_div' || name == 'params_table' || name == 'headers_table') {
            document.getElementById(idMap[tabs_id + '_' + index]).style.display = 'table'
        } else {
            document.getElementById(idMap[tabs_id + '_' + index]).style.display = 'contents'
        }
        // document.getElementById(idMap[tabs_id + '_' + index]).style.display = 'table'

        fangdou = false
        if (tabs_id == 'tabs_body') {
            handleBodyV(index)
        }

    }
    function setParamsTable() {
        var table = document.getElementById('params_table');
        let envid = 'params_table'
        table.innerHTML = '<tr><th style="width:20px">  <input type="checkbox" name="all" onchange="changCheckbox(this,\'params\',-1)" id="params_checkbox">  </th><th style="width: 200px;">参数名</th><th>参数值</th><th>说明</th><th style="width: 100px;">操作</th></tr>'
        let index = 1
        Object.keys(apiInfo.params).forEach(key => {
            var newRow = table.insertRow(-1); // 在表格的最后插入新行  
            var newCell0 = newRow.insertCell(0);
            var newCell1 = newRow.insertCell(1);
            var newCell2 = newRow.insertCell(2);
            var newCell3 = newRow.insertCell(3);
            var newCell4 = newRow.insertCell(4);
            let st = apiInfo.params[key].status
            if (st) {
                st = 'checked'
            } else {
                st = ''
            }
            newCell0.innerHTML = '<input type="checkbox" name="' + key + '" onchange="changCheckbox(this,\'params\',' + index + ')" class="p_checkbox" ' + st + '>'
            newCell1.innerHTML = '<input type="text" placeholder="参数名" style="width:98%" value="' + key.replace(/"/g, '&quot;') + '"  class="inp"  onchange="setApiInfoTmp(\'params_key\',this,\'' + key + '\')">';
            newCell1.style.width = '200px';
            const val = apiInfo.params[key].value
            newCell2.innerHTML = '<input type="text" placeholder="空值" style="width:98%" value="' + val.replace(/"/g, '&quot;') + '"   class="inp"  onchange="setApiInfoTmp(\'params_val\',this,\'' + key + '\')">';
            const remark = apiInfo.params[key].remark
            newCell3.innerHTML = '<input type="text" placeholder="说明" style="width:98%" value="' + remark.replace(/"/g, '&quot;') + '"   class="inp"  onchange="setApiInfoTmp(\'params_remark\',this,\'' + key + '\')">';
            newCell4.innerHTML = "<div class='f ' style='flex-direction: row;'><button class='button_ts' onclick='saveApi(\"params\",\"" + key + "\"," + index + ")'>保存</button><button class='button_ts' style='margin-left:4px' onclick='saveApi(\"params_del\",\"" + key + "\"," + index + ")'>删除</button></div>";
            newCell4.style.width = '100px';
            index += 1
        });
        var newRow = table.insertRow(-1); // 在表格的最后插入新行  
        var newCell0 = newRow.insertCell(0);
        var newCell1 = newRow.insertCell(1);
        var newCell2 = newRow.insertCell(2);
        var newCell3 = newRow.insertCell(3);
        var newCell4 = newRow.insertCell(4);
        newCell0.innerHTML = '<input type="checkbox" disabled id="params_kong">'
        newCell1.innerHTML = '<input type="text" placeholder="参数名" style="width:98%" class="inp" onchange="setApiInfoTmp(\'params_key\',this,\'-1\')">';
        newCell1.style.width = '200px';
        newCell2.innerHTML = '<input type="text" placeholder="参数值" style="width:98%"  class="inp"  onchange="setApiInfoTmp(\'params_val\',this,\'-1\')">';
        newCell3.innerHTML = '<input type="text" placeholder="说明" style="width:98%"  class="inp"  onchange="setApiInfoTmp(\'params_remark\',this,\'-1\')">';
        newCell4.innerHTML = "<div class='f ' style='flex-direction: row;'><button class='button_ts' onclick='saveApi(\"params\",\"-1\"," + index + ")'>保存</button><button class='button_ts' onclick='batchAdd(\"params\")' style='margin-left:4px' >批量</button></div>";
        newCell4.style.width = '100px';
    }
    function setHeadersTable() {
        var table = document.getElementById('headers_table');
        let envid = 'headers_table'
        table.innerHTML = '<tr><th style="width: 200px;">请求头名</th><th>请求头值</th><th style="width: 100px;">操作</th></tr>'
        let index = 1
        Object.keys(apiInfo.headers).forEach(key => {
            var newRow = table.insertRow(-1); // 在表格的最后插入新行  
            // var newCell0 = newRow.insertCell(0);
            var newCell1 = newRow.insertCell(0);
            var newCell2 = newRow.insertCell(1);
            var newCell3 = newRow.insertCell(2);
            // var newCell4 = newRow.insertCell(3);
            // newCell0.innerHTML = '<input type="checkbox">'
            newCell1.innerHTML = '<input type="text" placeholder="请求头" style="width:98%" value="' + key.replace(/"/g, '&quot;') + '"  class="inp" onchange="setApiInfoTmp(\'headers_key\',this,\'' + key + '\')" >';
            newCell1.style.width = '200px';
            const val = apiInfo.headers[key].value
            newCell2.innerHTML = '<input type="text" placeholder="值" style="width:98%" value="' + val.replace(/"/g, '&quot;') + '"   class="inp"  onchange="setApiInfoTmp(\'headers_value\',this,\'' + key + '\')">';
            // const remark = apiInfo.params[key].remark
            // newCell3.innerHTML = '<input type="text" placeholder="说明" style="width:98%" value="' + remark + '"   class="inp" >';
            newCell3.innerHTML = "<div class='f ' style='flex-direction: row;'><button class='button_ts' onclick='saveApi(\"headers\",\"" + key + "\"," + index + ")'>保存</button><button class='button_ts' style='margin-left:4px' onclick='saveApi(\"headers_del\",\"" + key + "\"," + index + ")'>删除</button></div>";
            newCell3.style.width = '100px';
            index += 1
        });
        var newRow = table.insertRow(-1); // 在表格的最后插入新行  
        // var newCell0 = newRow.insertCell(0);
        var newCell1 = newRow.insertCell(0);
        var newCell2 = newRow.insertCell(1);
        var newCell3 = newRow.insertCell(2);
        // var newCell4 = newRow.insertCell(4);
        // newCell0.innerHTML = '<input type="checkbox">'
        newCell1.innerHTML = '<input type="text" placeholder="请求头" style="width:98%" class="inp"  onchange="setApiInfoTmp(\'headers_key\',this,\'-1\')" >';
        newCell1.style.width = '200px';
        newCell2.innerHTML = '<input type="text" placeholder="值" style="width:98%"  class="inp"  onchange="setApiInfoTmp(\'headers_value\',this,\'-1\')">';
        // newCell3.innerHTML = '<input type="text" placeholder="说明" style="width:98%"  class="inp" >';
        newCell3.innerHTML = "<div class='f ' style='flex-direction: row;'><button class='button_ts' onclick='saveApi(\"headers\",\"-1\"," + index + ")'>保存</button><button class='button_ts'  onclick='batchAdd(\"headers\")' style='margin-left:4px' >批量</button></div>";
        newCell3.style.width = '100px';
    }
    function showBeforeAfter() {
        const st = '<div style="user-select: none;margin: 4px;border: 1px solid var(--vscode-editor-foreground);width: 95%;height: 32px;border-radius: 2px" class="f kuang" id="$id" onclick="showDetail($index,\'$id\',\'$position\')"><span style="margin-left: 4px;">$name</span><div class="f" style="flex:1"></div>'
        const edit = '<a style="user-select: none;margin-right: 4px;font-size: 12px;"  onclick="showcontent($index,\'$id\',\'$position\')" >编辑</a>'
        const yong = '<a style="user-select: none;margin-right: 4px;font-size: 12px;display:$display;" class="qiyong" onclick="shiyong(true,\'$position\',\'$id\')" >启用</a>'
        const jinyong = '<a style="user-select: none;margin-right: 4px;font-size: 12px;display:$display;" class="jinyong" onclick="shiyong(false,\'$position\',\'$id\')" >禁用</a>'
        const end = '<a style="user-select: none;margin-right: 4px;font-size: 12px;" onclick="showDetail($index,\'$id\',\'$position\')">查看</a></div>'
        var bstring = ''
        for (var i = 0; i < apiInfo.before.length; i++) {
            const da = apiInfo.before[i]
            bstring += st.replace('$id', da.id).replace('$name', da.name).replace('$index', i).replace('$id', da.id).replace('$position', 'before');
            if (da.edit) {
                bstring += edit.replace('$index', i).replace('$id', da.id).replace('$position', 'before')
            }
            if (!da.id.endsWith('_inner')) {
                if (!da.status) {
                    bstring += yong.replace('$index', i).replace('$id', da.id).replace('$display', 'block').replace('$position', 'before');
                    bstring += jinyong.replace('$index', i).replace('$id', da.id).replace('$display', 'none').replace('$position', 'before');
                } else {
                    bstring += yong.replace('$index', i).replace('$id', da.id).replace('$display', 'none').replace('$position', 'before');
                    bstring += jinyong.replace('$index', i).replace('$id', da.id).replace('$display', 'block').replace('$position', 'before');
                }
            }
            bstring += end.replace('$index', i).replace('$id', da.id).replace('$position', 'before');
        }
        document.getElementById('bslide').innerHTML = bstring;
        // 以上是前置
        bstring = ''
        for (i = 0; i < apiInfo.after.length; i++) {
            const da = apiInfo.after[i]
            bstring += st.replace('$id', da.id).replace('$name', da.name).replace('$index', i).replace('$id', da.id).replace('$position', 'after');
            if (da.edit) {
                bstring += edit.replace('$index', i).replace('$id', da.id).replace('$position', 'after')


            }
            if (!da.id.endsWith('_inner')) {
                if (!da.status) {
                    bstring += yong.replace('$index', i).replace('$id', da.id).replace('$display', 'block').replace('$position', 'before');
                    bstring += jinyong.replace('$index', i).replace('$id', da.id).replace('$display', 'none').replace('$position', 'before');
                } else {
                    bstring += yong.replace('$index', i).replace('$id', da.id).replace('$display', 'none').replace('$position', 'before');
                    bstring += jinyong.replace('$index', i).replace('$id', da.id).replace('$display', 'block').replace('$position', 'before');
                }
            }
            bstring += end.replace('$index', i).replace('$id', da.id).replace('$position', 'after');
        }
        document.getElementById('aslide').innerHTML = bstring;
    }
    function changCheckbox(v, position, index) {
        let name = v.name
        let checked = v.checked
        if (name == 'all') {
            if (checked) {
                let cks = []
                if (position == 'params') {
                    cks = document.getElementById('params_table').getElementsByClassName("p_checkbox");

                } else if (position == 'body') {
                    cks = document.getElementById('body_div').getElementsByClassName("b_checkbox");
                }
                for (var i = 0; i < cks.length; i++) {
                    if (cks[i].checked != checked) {
                        cks[i].checked = checked
                        let n = cks[i].name
                        tmpApiInfo[position][n].status = checked
                    }
                }

            }

        } else {
            tmpApiInfo[position][name].status = checked
            if (!checked) {
                if (position == 'params') {
                    document.getElementById('params_checkbox').checked = false
                } else if (position == 'body') {
                    document.getElementById('body_checkbox').checked = false

                }
            }
        }
    }
    function shiyong(st, position, id) {
        if (!st) {
            document.getElementById(id).getElementsByClassName('qiyong')[0].style.display = 'block'
            document.getElementById(id).getElementsByClassName('jinyong')[0].style.display = 'none'
        } else {
            document.getElementById(id).getElementsByClassName('qiyong')[0].style.display = 'none'
            document.getElementById(id).getElementsByClassName('jinyong')[0].style.display = 'block'
        }
        vscode.postMessage({ command: 'setStatus4ab', da: { position: position, id, tid: apiInfoBase.id, status: st } });
    }
    function showcontent(index, id, position) {
        const da = apiInfo[position][index]
        let con = da.content
        if (da.id != id) {
            for (var i = 0; i < apiInfo[position].length; i++) {
                const da2 = apiInfo[position]
                if (da2.id == id) {
                    con = da2.content;
                    break;
                }
            }
        }
        let name = apiInfoBase.name + '的后置脚本'
        if (position == 'before') {
            name = apiInfoBase.name + '的前置脚本'
        }
        vscode.postMessage({ command: 'openTmpFile', da: { name, content: con, id } });
    }

    function setBodyKv() {
        var table = document.getElementById('body_table');
        let envid = 'body_table'
        table.innerHTML = '<tr><th style="width:20px">  <input type="checkbox" name="all" onchange="changCheckbox(this,\'body\',-1)" id="body_checkbox">  </th><th style="width: 200px;">参数名</th><th>参数值</th><th>说明</th><th style="width: 100px;">操作</th></tr>'
        let index = 1
        Object.keys(apiInfo.body).forEach(key => {
            if (key.startsWith('daodan.')) {
                return
            }
            var newRow = table.insertRow(-1); // 在表格的最后插入新行  
            var newCell0 = newRow.insertCell(0);
            var newCell1 = newRow.insertCell(1);
            var newCell2 = newRow.insertCell(2);
            var newCell3 = newRow.insertCell(3);
            var newCell4 = newRow.insertCell(4);
            let st = apiInfo.body[key].status
            if (st) {
                st = 'checked'
            } else {
                st = ''
            }
            newCell0.innerHTML = '<input type="checkbox" name="' + key + '" onchange="changCheckbox(this,\'body\',' + index + ')" class="b_checkbox" ' + st + '>'
            newCell1.innerHTML = '<input type="text" placeholder="参数名" style="width:98%" value="' + key.replace(/"/g, '&quot;') + '"  class="inp"  onchange="setApiInfoTmp(\'body_key\',this,\'' + key + '\')">';
            newCell1.style.width = '200px';
            const val = apiInfo.body[key].value
            newCell2.innerHTML = '<input type="text" placeholder="空值" style="width:98%" value="' + val.replace(/"/g, '&quot;') + '"   class="inp"  onchange="setApiInfoTmp(\'body_val\',this,\'' + key + '\')">';
            const remark = apiInfo.body[key].remark
            newCell3.innerHTML = '<input type="text" placeholder="说明" style="width:98%" value="' + remark.replace(/"/g, '&quot;') + '"   class="inp"  onchange="setApiInfoTmp(\'body_remark\',this,\'' + key + '\')">';
            newCell4.innerHTML = "<div class='f ' style='flex-direction: row;'><button class='button_ts' onclick='saveApi(\"body\",\"" + key + "\"," + index + ")'>保存</button><button class='button_ts' style='margin-left:4px' onclick='saveApi(\"body_del\",\"" + key + "\"," + index + ")'>删除</button></div>";
            newCell4.style.width = '100px';
            index += 1
        });
        var newRow = table.insertRow(-1); // 在表格的最后插入新行  
        var newCell0 = newRow.insertCell(0);
        var newCell1 = newRow.insertCell(1);
        var newCell2 = newRow.insertCell(2);
        var newCell3 = newRow.insertCell(3);
        var newCell4 = newRow.insertCell(4);
        newCell0.innerHTML = '<input type="checkbox" disabled >'
        newCell1.innerHTML = '<input type="text" placeholder="参数名" style="width:98%" class="inp" onchange="setApiInfoTmp(\'body_key\',this,\'-1\')">';
        newCell1.style.width = '200px';
        newCell2.innerHTML = '<input type="text" placeholder="参数值" style="width:98%"  class="inp"  onchange="setApiInfoTmp(\'body_val\',this,\'-1\')">';
        newCell3.innerHTML = '<input type="text" placeholder="说明" style="width:98%"  class="inp"  onchange="setApiInfoTmp(\'body_remark\',this,\'-1\')">';
        newCell4.innerHTML = "<div class='f ' style='flex-direction: row;'><button class='button_ts' onclick='saveApi(\"body\",\"-1\"," + index + ")'>保存</button><button class='button_ts' onclick='batchAdd(\"body\")' style='margin-left:4px' >批量</button></div>";
        newCell4.style.width = '100px';
    }
    function sendresult(da) {
        setSendLoading(false);
        console.log('sendresult', da)
        tmpresult.request = da.request
        tmpresult.response = da.response
        tmpresult.error = da.error
        setResCode()
        setResAll()
        if (da.error) {
            changetab('tabs_response', 3)
        } else {
            changetab('tabs_response', 0)
        }
        changeF('menu_response', document.getElementById('menu_response'))
    }

    function saveItem() {
        const name = document.getElementById('itemName').value
        const idd = document.getElementById('itemId').value
        if (!name) {
            vscode.postMessage({ command: 'message', content: "名称不能为空！" });
            return
        }
        if (name == apiInfoBase.name) {
            vscode.postMessage({ command: 'message', content: "保存成功！" });
        } else {
            vscode.postMessage({ command: 'saveApiInfo', da: { name, id: idd } });
            document.title = name
        }

    }
    function delItem() {
        ccomform(() => {
            const idd = document.getElementById('itemId').value
            vscode.postMessage({ command: 'delApi', da: { id: idd } });
        })
    }
    function exportItem() {
        const baseData = { 'path': apiInfo.path, method: apiInfo.method, params: {}, timeout: apiInfo.timeout, headers: {}, body: {}, aid: apiInfoBase.id, name: apiInfoBase.name }
        baseData.params = { ...apiInfo.params }
        baseData.headers = { ...apiInfo.headers }
        baseData.body = { ...apiInfo.body }
        baseData.contentType = apiInfo.contentType
        // 以上是组成基本请求数据
        // 以下准备参数的值
        baseData.p = { ...itemInfo.global.params, ...envInfo.params }

        // 以下准备处理前置脚本
        let before = ''
        for (var i = 0; i < apiInfo.before.length; i++) {
            const da = apiInfo.before[i]
            if (da.status && da.id != 'before_inner') {
                before += da.content + '\n'
            }
        }
        baseData.before = before
        // 以下准备处理后置脚本
        let after = ''
        for (i = 0; i < apiInfo.after.length; i++) {
            const da = apiInfo.after[i]
            if (da.status && da.id != 'after_inner') {
                after += da.content + '\n'
            }
        }
        baseData.after = after
        baseData.env = itemInfo.env
        vscode.postMessage({ command: 'openTmpFile', da: { name: apiInfoBase.name + '数据.json', content: JSON.stringify(baseData, null, 4) } });
        vscode.postMessage({ command: 'message', content: apiInfoBase.name + '数据.json' + "文件内容请自行保存！" });
    }
</script>
<style>
    table {
        border-collapse: collapse;
        /* 边框合并为一个 */
        box-sizing: border-box;
        width: 98%;
        /* 减去左右的内边距 */
        /*列宽由表格宽度和列宽度设定*/
        table-layout: fixed;
        font-size: 13px;
    }

    th,
    td {
        border: 1px solid #aaaaaa;
        /* 单元格边框 */
        padding: 2px;
        /* 内边距 */
        text-align: left;
        /* 文本左对齐 */
        word-break: break-word;
    }

    th {
        font-weight: 500;
        text-align: center;
    }

    body {
        font-family: Arial, sans-serif;
    }

    .f {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    a {
        cursor: pointer;
    }

    .form {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: baseline;
        margin: 16px 4px;
    }

    .form label {
        width: 120px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .inp {
        width: 40vw;
        line-height: 32px;
    }

    .method_option {
        font-size: 16px;
        font-weight: 500;
    }

    .button {
        display: inline-block;
        padding: 4px 8px;
        background-color: #007BFF;
        color: #fff;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        text-align: center;
        font-size: 14px;
    }

    .button_t {
        display: inline-block;
        padding: 4px 8px;
        background-color: transparent;
        border: 1px solid var(--vscode-editor-foreground);
        border-radius: 5px;
        cursor: pointer;
        text-align: center;
        font-size: 14px;
        color: var(--vscode-editor-foreground);
    }

    .button_ts {
        display: inline-block;
        padding: 2px 4px;
        background-color: transparent;
        border: 1px solid var(--vscode-editor-foreground);
        border-radius: 2px;
        cursor: pointer;
        text-align: center;
        font-size: 12px;
        color: var(--vscode-editor-foreground);
    }

    .chooseF {
        border-radius: 2px;
        border-bottom: 1px solid var(--vscode-editor-foreground);
        border-top: 1px solid var(--vscode-editor-foreground);
        border-left: 1px solid var(--vscode-editor-foreground);
        z-index: 9;
        margin-right: -5px;
    }

    .button2 {
        display: inline-block;
        padding: 4px 20px;
        background-color: #fafafa;
        color: red;
        border: 1px solid red;
        border-radius: 5px;
        cursor: pointer;
        text-align: center;
        font-size: 16px;
    }

    .button3 {
        background-color: #fafafa;
        color: #0056b3;
        border: 1px solid #0056b3;
        border-radius: 5px;
        cursor: pointer;
        text-align: center;
        display: inline-block;
        padding: 4px 8px;
        font-size: 14px;
    }

    .button:hover {
        background-color: #008BFF;
    }

    .button3:hover {
        background-color: #93c8f0;
    }

    input[type="checkbox"] {
        height: 22px;
    }

    #env-select,
    #method-select {
        background-color: transparent;
        color: var(--vscode-editor-foreground);
        height: 32px;
        border: 0px;
        cursor: pointer;
    }

    .tabs {
        display: flex;
        justify-content: start;
        align-items: center;
        width: 98%;
        height: 32px;

    }

    .tabs .active {
        color: orange;
        /* font-size: 16px; */
        font-weight: 500;
    }

    .tab {
        margin: 0px 8px;
        padding: 4px 12px;
        /* margin-bottom: -3px; */
        font-size: 15px;
        user-select: none;
        cursor: pointer;
    }

    .tab_small {
        margin: 0px 4px;
        padding: 4px 8px;
        /* margin-bottom: -3px; */
        font-size: 13px;
        user-select: none;
        cursor: pointer;
    }

    a {
        cursor: pointer;
    }


    input {
        height: 28px;
        line-height: 28px;
        background-color: transparent;
        color: var(--vscode-editor-foreground);
        border: 0px;
        border-bottom: 1px solid var(--vscode-editor-foreground);
    }

    html,
    body {
        width: 100%;
        height: 100%;
        margin: 0px;
        padding: 0px;
    }
</style>

</html>